<template>
    <div class="continer">
        <div class="topbox">
            <el-button type="primary" icon="el-icon-plus" @click="add">新建文件</el-button>
            <el-button icon="el-icon-refresh" @click="()=>{getList()}">刷新列表</el-button>
        </div>
        <el-table :data="listData" row-key="number" style="width: 100%" stripe border>
            <!--<el-table-column type="selection" width="55"></el-table-column>-->
            <el-table-column label="文件名称" prop="name"></el-table-column>
            <el-table-column label="关联业务类型" prop="typeName">
                <template slot-scope="scope">
                    <el-tag v-for="item in scope.row.typeName.split(',')" :key="item.id">{{item}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="数量" prop="num"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button>
                    <el-button
                        type="text"
                        size="mini"
                        @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="listLen"
            :page-size="limit"
            @current-change="toPage"
            :current-page.sync="currentPage"
            class="txt_r mt_20"
        ></el-pagination>
        <!--        添加文件        -->
        <el-dialog
            :title="formTxt.title"
            :visible.sync="showAdd"
            :beforeClose="(close)=>{clearForm('addForm',close)}"
            :closeOnClickModal="false"
        >
            <el-form :model="myData" label-width="120px" :rules="formRules" ref="addForm">
                <el-form-item label="文件名称" prop="name">
                    <el-input v-model="myData.name"></el-input>
                </el-form-item>
                <el-form-item label="关联业务类型" prop="typeArr">
                    <el-checkbox-group v-model="myData.typeArr">
                        <el-checkbox
                            v-for="item in types"
                            :label="item.id"
                            :name="item.id"
                            size="small"
                            :key="item.id"
                        >{{item.value}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="文件数量" prop="num">
                    <el-input v-model="myData.num"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="myData.note" rows="4"></el-input>
                </el-form-item>
                <el-form-item class="txt_r">
                    <el-button type="primary" @click="submit">{{formTxt.btn}}</el-button>
                    <el-button @click="()=>{clearForm('addForm','showAdd')}">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import * as apis from "../../api/system/file";

export default {
    name: "file",
    data() {
        return {
            // 列表数据
            listData: [],
            // 案件类型
            types: [],
            // 总条数
            listLen: 0,
            // 每页条数
            limit: 10,
            currentPage: 1,
            // 多选数据
            selectArr: [],
            // 显示添加表单
            showAdd: false,
            // 添加/修改数据
            myData: {},
            myDataType: [],
            // 表单标题和事件
            formTxt: { title: "添加文件", btn: "添加", event: "addFile" },
            // 表单验证
            formRules: {
                name: [
                    {
                        required: true,
                        message: "请输入文件名称",
                        trigger: "blur"
                    }
                ],
                typeArr: [
                    {
                        type: "array",
                        required: true,
                        message: "请至少选择一个关联业务类型",
                        trigger: "change"
                    }
                ],
                num: [
                    {
                        required: true,
                        message: "请输入文件数量",
                        trigger: "blur"
                    },
                    {
                        pattern: /^\d+$/,
                        message: "请输入正确的数量",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        // 获取列表
        getList(page = 1) {
            this.currentPage = page;
            apis.getList({
                page: page,
                limit: this.limit
            })
                .then(data => {
                    if (data.code) {
                        this.$message({
                            type: "error",
                            message: data.message,
                            duration: 1800
                        });
                        return;
                    }
                    this.listLen = data.data.total;
                    this.listData = data.data.list;
                })
                .catch(() => {
                    this.$message({
                        type: "error",
                        message: "获取列表失败",
                        duration: 1800
                    });
                });
        },
        // 获取案件类型
        getType() {
            apis.getType()
                .then(data => {
                    if (data.code) {
                        return;
                    }
                    let o = [];
                    for (let i in data.data) {
                        o.push({ id: i, value: data.data[i] });
                    }
                    this.types = o;
                })
                .catch(() => {});
        },
        // 点击添加
        add() {
            this.myData = { typeArr: [] };
            this.showAdd = true;
            this.formTxt = { title: "添加文件", btn: "添加", event: "addFile" };
        },
        // 点击修改
        handleEdit(index, row) {
            row.typeArr = row.typeId.split(",");
            this.myData = JSON.parse(JSON.stringify(row));
            this.showAdd = true;
            this.formTxt = {
                title: "修改文件",
                btn: "修改",
                event: "editFile"
            };
        },

        // 提交
        submit() {
            this.$refs["addForm"].validate(valid => {
                if (!valid) {
                    return;
                }
                this.myData.type = this.myData.typeArr.join(",");
                let formData = JSON.parse(JSON.stringify(this.myData));
                apis[this.formTxt.event](formData)
                    .then(data => {
                        if (data.code) {
                            this.$message({
                                type: "error",
                                message: data.message,
                                duration: 1800
                            });
                            return;
                        }
                        this.$message({
                            type: "success",
                            message: this.formTxt.btn + "成功!",
                            duration: 1800
                        });
                        this.getList();
                    })
                    .catch(() => {
                        this.$message({
                            type: "error",
                            message: this.formTxt.btn + "失败!",
                            duration: 1800
                        });
                    });
                this.clearForm("addForm", "showAdd");
            });
        },
        // 删除
        handleDelete(id, obj) {
            this.$confirm("确定删除该文件吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    apis.deleteFile({ id: obj.id })
                        .then(data => {
                            if (data.code) {
                                this.$message({
                                    type: "error",
                                    message: data.message
                                });
                                return;
                            }
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.getList();
                        })
                        .catch(() => {
                            this.$message({
                                type: "error",
                                message: "删除失败!"
                            });
                        });
                })
                .catch(() => {});
        },
        // 跳转页数
        toPage(val) {
            this.getList(val);
        },
        // 清空表单  name: 表单rel名称，close：关闭方法/显示属性
        clearForm(name, close) {
            if (this.$refs[name]) {
                this.$refs[name].resetFields();
            }
            if (typeof close == "function") {
                close();
            } else {
                this[close] = false;
            }
        }
    },
    created() {
        this.getList();
        this.getType();
    }
};
</script>

<style scoped>
.txt_r {
    text-align: right;
}
.mt_20 {
    margin-top: 20px;
}
.el-tag + .el-tag {
    margin-left: 10px;
}
.topbox {
    margin-bottom: 20px;
}
</style>
